import  React, { Component } from 'react'
import {connect} from 'react-redux'
import {registerUser} from '../../actions/authActions'
import { PropTypes } from 'prop-types'
import {withRouter} from 'react-router-dom'
import TextFieldGroup from '../../common/TextFieldGroup'
class Register extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
      email: '',
      password: '',
      password2: '',
      errors: {}
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  //获取输入的值，每个值对应相对应的名字 
  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit(e) {
       //阻止默认的行为哦
       e.preventDefault();
       const newUser = {
         name: this.state.name,
         email: this.state.email,
         password: this.state.password,
         password2: this.state.password2
       };
      //  console.log(newUser)
      //  { name: "zxw", email: "zxw@qq.com", password: "123", password2: "123"}
      //     email: "zxw@qq.com"
      //     name: "zxw"
      //     password: "123"
      //     password2: "123"
      //     __proto__: Object
      //  }
      
      //调用action 
      this.props.registerUser(newUser,this.props.history)
      }
      componentWillReceiveProps(nextProps) {
        if(nextProps.errors) {
           this.setState({
              errors:nextProps.errors
           })
        }
      }
  render() {
      const  {errors} =this.state;    
      // const {user  } =this.props.auth;
      return (
      <div className="register">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">注册</h1>
              <p className="lead text-center">创建新的账户</p>
              <form onSubmit={this.onSubmit}>
                <TextFieldGroup
                  placeholder="用户名"
                  name="name"
                  value={this.state.name}
                  onChange={this.onChange}
                  error={errors.name}
                />

                <TextFieldGroup
                  type="email"
                  placeholder="邮箱地址"
                  name="email"
                  value={this.state.email}
                  onChange={this.onChange}
                  error={errors.email}
                  info="我们使用了gravatar全球公认头像, 如果需要有头像显示, 请使用在gravatar注册的邮箱"
                />

                <TextFieldGroup
                  type="password"
                  placeholder="密码"
                  name="password"
                  value={this.state.password}
                  onChange={this.onChange}
                  error={errors.password}
                />

                <TextFieldGroup
                  type="password"
                  placeholder="确认密码"
                  name="password2"
                  value={this.state.password2}
                  onChange={this.onChange}
                  error={errors.password2}
                />
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div >
    )
  }
}
Register.protoTupes={
    registerUser:PropTypes.func.isRequired,
    auth:PropTypes.object.isRequired,
    errors:PropTypes.object.isRequired,
}
//将状态映射为属性
const  mapStateToProps=(state)=>({
   auth:state.auth,
   errors:state.errors
})
//connect  将两个组件连接起来
export default connect(mapStateToProps,{registerUser})(withRouter(Register))